<!-- 地址管理页面 -->
<template>
  <AddressTitle action="新建" @behavior="handleBehavior">管理收货地址</AddressTitle>
  <div class="address-manager">
    <div class="address-manager-title">我的收货地址</div>
    <AddressCard v-for="item in addressList" :key="item._id" :address="item"></AddressCard>
  </div>
</template>

<script>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import AddressTitle from './components/addressTitle'
import AddressCard from './components/addressCard'
import { get } from '@/utils/request'
import { ADDRESS } from '@/api/interface'
// 跳转到新建页面
const useBehavior = (router) => {
  const handleBehavior = () => {
    localStorage.forCreate = true;
    router.push({name:'createAddress'})
  }
  return {handleBehavior}  
}
// 获取收获地址
const useAddressRequest = () => {
  let addressList = ref('');
  get(ADDRESS)
  .then(response => addressList.value = response.data)
  .catch(error => console.log(error))
  return {addressList}
}
//composition
export default {
  name: 'addressManager',
  components:{AddressTitle,AddressCard},
  setup(){
    const router = useRouter()
    const {handleBehavior} = useBehavior(router)
    const {addressList} = useAddressRequest();
    return {handleBehavior,addressList}
  }
}
</script>

<style scoped lang="scss">
@import '@/styles/mixin.scss';
@import '@/styles/theme.scss';
.address-manager{
  @include address-layout;
  padding-left: 18px;
  padding-right: 18px;
  &-title{
    margin-top: 18px;
    margin-bottom: 12px;
    font-size: 14px;
    color: $theme-font-color;
  }
}
</style>